<template>
  <div>
    <MyTable :data="list">
      <template #btn="{rows, msg}">
        <button @click="datainfoDel(rows.id)">删除</button>
      </template>
    </MyTable>
    <MyTable :data="list2">
      <template #btn="{rows, msg}">
        <button @click="chakan(rows)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import MyTable from "./components/MyTable.vue";

interface Listarr {
  id: number;
  name: string;
  age: number;
}
const list = ref<Listarr[]>([
  {id: 1, name: "张小花", age: 18},
  {id: 2, name: "孙大明", age: 19},
  {id: 3, name: "刘德忠", age: 17},
]);
const list2 = ref<Listarr[]>([
  {id: 1, name: "赵小云", age: 18},
  {id: 2, name: "刘蓓蓓", age: 19},
  {id: 3, name: "姜肖泰", age: 17},
]);

const datainfoDel = (id: number) => {
  list.value = list.value.filter((item: {id: number}) => item.id !== id);
};

const chakan = (rows: Listarr) => {
  alert(`姓名：${rows.name},年龄：${rows.age}岁`);
};
</script>
